import React from 'react'
import axios from 'axios'
import InfiniteScroll from 'react-infinite-scroll-component'
import './app.less'

const limit = 20

export default class extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            show: false,
            list: [],
            offset: 0,
            hasMore: true,
        }
        this.queryName = null
    }

    handleClose() {
        this.setState({
            show: !this.state.show,
        })
    }


    handleMouseOver = async () => {
        this.setState({
            show: true,
        })
        wokooApp.className = 'wokoo-app-unfold'

        this.getQueryName()
        this.getList()
    }

    handleMouseLeave = () => {
        console.log('handleMouseLeave::::')
        this.setState({
            show: false,
        })
        wokooApp.className = 'wokoo-app-fold'
    }


    handleInfiniteOnLoad = () => {
        this.getList()
    }

    /**
     * 分析请求的url可知，请求接口为：
     * `https://www.zhihu.com/api/v4/columns${this.queryName}/items?limit=20&offset=${offset}`
     * 
     * 其中this.queryName是专栏名称，当页面为专栏列表页时就是pathname; 
     * 当页面为专栏详情页时，需要通过类名为ColumnPageHeader-TitleColumn的a标签的href来获取。
     */
    getQueryName = () => {
        let pathname = location.pathname
        let detailRegExp = /^\/p\/\d+/
        let queryName = ''
        // 专栏详情页
        if (detailRegExp.test(pathname)) {
            let aTage = document.getElementsByClassName(
                'ColumnPageHeader-TitleColumn'
            )
            let url = aTage[0].href
            queryName = url.slice(url.lastIndexOf('/'))
        } else {
            // 专栏列表页
            // http://zhuanlan.zhihu和http://zhihu/column两种情况都是专栏
            if (pathname.indexOf('/column') === 0) {
                pathname = pathname.slice('/column'.length)
            }
            queryName = pathname
        }
        this.queryName = queryName
    }

    // 发送请求，拉取目录列表
    getList = async () => {
        if (!this.state.hasMore) return
        let { offset } = this.state
        let { data } = await axios.get(
            `https://www.zhihu.com/api/v4/columns${this.queryName}/items?limit=20&offset=${offset}`
        )
        let list = data.data.map((i) => ({
            title: i.title,
            url: i.url,
            id: i.id,
            commentCount: i.comment_count,
            voteupCount: i.voteup_count,
        }))
        if (data.paging.is_end) {
            this.setState({ hasMore: false })
        }
        offset += limit

        this.setState({
            list: [...this.state.list, ...list],
            offset,
        })
    }

    render() {
        let { show, list, hasMore } = this.state
        return (
            <>
                {show ? (
                    <ul className="list-ul" onMouseLeave={this.handleMouseLeave}>
                        <InfiniteScroll
                            dataLength={list.length}
                            next={this.handleInfiniteOnLoad}
                            hasMore={hasMore}
                            loader={<h4>Loading...</h4>}
                            height={document.documentElement.clientHeight - 53}
                            endMessage={
                                <p style={{ textAlign: 'center' }}>
                                    <b>到底了，没内容啦~</b>
                                </p>
                            }
                        >
                            {list.map((i) => (
                                <li className="list-li" key={i.id}>
                                    <a className="list-a" href={i.url} target="_blank">
                                        {i.title}
                                    </a>
                                    <span className="list-span">{i.voteupCount} 赞同</span>
                                    <span className="list-span">{i.commentCount} 条评论</span>
                                </li>
                            ))}
                        </InfiniteScroll>
                    </ul>
                ) : (
                        <div
                            className="octotree-toggle"
                            onClick={this.handleShow}
                            onMouseOver={this.handleMouseOver}
                        >
                            <span>专栏目录</span>
                            <span className="octotree-toggle-icon" role="button">
                                »
                            </span>
                        </div>
                    )}
            </>
        )
    }
}
